<template>
  <a-modal
    title="选择物料"
    centered
    v-bind="$attrs"
    v-on="$listeners"
    :visible="visible"
    width="1236px"
    wrapClassName="choose-material-modal"
    @ok="handleOk()"
    @cancel="handleClose()"
  >
    <div class="choose-material-container">
      <!-- 筛选条件 -->
      <div class="modal-conditions-container">
        <ScreenConditions :isDataType="false">
          <template slot="conditions">
            <a-input
              placeholder="请输入物料名称"
              v-model="conditions.materialName"
            />
            <a-input placeholder="请输入供应商" v-model="conditions.supplier" />
          </template>
          <template slot="operate">
            <a-button type="primary" @click="queryData()"> 查询 </a-button>
          </template>
        </ScreenConditions>
      </div>
      <!-- 已选数量 -->
      <div class="has-choosed-container">
        已选择 <span>{{ selectedRowKeys.length }}</span
        >项
        <a-button type="link" @click="clearSelectedRowKeys()">清空</a-button>
      </div>
      <div class="modal-table-container">
        <TableView>
          <template>
            <a-table
              :row-selection="{
                selectedRowKeys: selectedRowKeys,
                onChange: onSelectChange,
              }"
              :data-source="tableData"
              rowKey="id"
              :scroll="{ y: 280 }"
              :columns="tableColumns"
              :pagination="pager"
              v-loading="loading"
              @change="paginationChange"
              v-if="visible"
            >
              <template slot="index" slot-scope="text, record, index">
                {{ index + 1 }}
              </template>
              <template slot="operate" class="table-operation">
                <div class="text-button-group">
                  <a-button type="link">查看</a-button>
                  <a-button type="link">编辑</a-button>
                </div>
              </template>
            </a-table>
          </template>
        </TableView>
      </div>
    </div>
  </a-modal>
</template>

<script>
//选择物料弹窗
import ScreenConditions from "@/components/ScreenConditions";
import TableView from "@/components/tableView";
import paginationMixins from "@/mixins/pagination";
import { queryMaterialOutBaseList } from "@/api/wisdom-beam/material-app";
export default {
  name: "ChooseMaterial",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    orgCode: {
      type: Object,
      default: () => {
        return {};
      },
    },
    selectedRowKeys: {
      type: Array,
      default: () => {
        return [];
      },
    },
    selectListData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    wareId: {
      type: String,
      default: "",
    },
  },
  mixins: [paginationMixins],
  components: {
    ScreenConditions,
    TableView,
  },
  data() {
    return {
      loading: false,
      conditions: {
        materialName: "",
        supplier: "",
      },
      selectedData: [],
      tableColumns: [
        {
          title: "序号",
          dataIndex: "index",
          key: "index",
          width: "80px",
          scopedSlots: { customRender: "index" },
        },
        {
          title: "物料名称",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "物料规格",
          dataIndex: "norms",
          key: "norms",
        },
        {
          title: "型号",
          dataIndex: "model",
          key: "model",
        },
        {
          title: "材质",
          dataIndex: "material",
          key: "material",
        },
        {
          title: "计量单位",
          dataIndex: "unit",
          key: "unit",
        },
        {
          title: "供应商",
          dataIndex: "supplier",
          key: "supplier",
        },
        // {
        //   title: "单价(元)",
        //   dataIndex: "price",
        //   key: "price",
        // },
        {
          title: "物料类型",
          dataIndex: "materialTypeName",
          key: "materialTypeName",
        },
        {
          title: "物料大类",
          dataIndex: "typeName",
          key: "typeName",
        },
        {
          title: "剩余库存",
          dataIndex: "surplus",
          key: "surplus",
        },
      ],
      tableData: [],
    };
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          //查询物料列表
          this.queryData();
        }
      },
      immediate: true,
    },
  },
  methods: {
    //清楚一选择的
    clearSelectedRowKeys() {
      this.$emit("update:selectedRowKeys", []);
      this.$emit("update:selectListData", []);
      this.selectedData = [];
    },

    //查询物料列表
    queryData() {
      let { page, pageSize } = this.pager;
      let { orgCode } = this;
      let { materialName, supplier } = this.conditions;
      this.loading = true;
      queryMaterialOutBaseList({
        orgCode: orgCode?.key || "",
        name: materialName,
        supplier,
        page,
        pageSize,
        warehouseId: this.wareId,
      })
        .then((res) => {
          let { data } = res;
          this.pager.total = data.result.total;
          this.tableData = data.result.rows;
        })
        .catch((_) => {
          this.tableData = [];
          this.pager.total = 0;
        })
        .finally((_) => {
          this.loading = false;
        });
    },

    //监听分页切换
    paginationChange(pagination) {
      let { current, pageSize } = pagination;
      this.pager.pageSize = pageSize;
      this.pager.page = current;
      this.queryData();
    },

    //监听table选择
    onSelectChange(selectedRowKeys, rows) {
      this.$emit("update:selectedRowKeys", selectedRowKeys);
      this.selectedData.push(...rows);
      this.selectedData = this.selectedData.filter((v) =>
        selectedRowKeys.includes(v.id)
      );
      this.selectedData = this.uniqueArr(this.selectedData, "id");
    },

    //数组去重
    uniqueArr(arr, val) {
      const res = new Map();
      return arr.filter((item) => !res.has(item[val]) && res.set(item[val], 1));
    },

    //关闭弹窗
    handleClose() {
      this.$emit("update:visible", false);
      this.tableData = [];
      this.pager.page = 1;
      this.conditions = {
        materialName: "",
        people: "",
      };
    },

    //确定
    handleOk() {
      let { selectedData, selectListData } = this;
      let chooseData = this.uniqueArr(
        [...selectedData, ...selectListData],
        "id"
      );
      let supplier = Array.from(new Set(chooseData.map((v) => v.supplier)));
      if (supplier.length > 1) {
        this.$message.error("请选择相同的供应商");
      } else {
        this.$emit("update:selectListData", chooseData);
        this.handleClose();
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.choose-material-modal {
  .ant-modal-body {
    padding: 0;
    .choose-material-container {
      height: 510px;
      overflow: hidden;
      .flex();
      .modal-conditions-container {
        padding-top: 10px;
      }
      flex-direction: column;
      .custom-scrollbar();
      .conditions-screening-container {
        box-shadow: none;
      }
      .operate-container .ant-btn {
        margin-left: 0;
      }
      .has-choosed-container {
        height: 44px;
        background: rgba(0, 152, 255, 0.1);
        border: 1px solid #5ebcfb;
        margin: 0 20px 10px 20px;
        color: #0098ff;
        font-size: 16px;
        padding: 0 24px;
        .flex();
        align-items: center;
        span {
          margin: 0 5px;
          font-weight: bold;
        }
        .ant-btn {
          color: #0098ff;
          padding: 0;
          margin-left: 15px;
          font-size: 15px;
          span {
            font-weight: 400;
            margin: 0;
          }
        }
      }
      .modal-table-container {
        height: 100%;
        overflow: hidden;
        padding: 0 20px;
        .ant-spin-container {
          overflow-x: hidden;
          border: 1px solid #e8e8e8;
          border-top: none;
          .ant-table {
            overflow-x: hidden;
            border-bottom: none;
          }
          td {
            &:first-child {
            }
          }
        }
      }
    }
  }
  .ant-modal-footer {
    text-align: center;
    border-top: none;
  }
}
</style>
